<template>
  <div>
    <common-head :title="itemName"/>
    <div class="container">
   <van-notice-bar mode="closeable">我要送你9百9十9多玫瑰花。</van-notice-bar>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="banner in pics" :key="banner.id">
        <img :src="banner.pic" alt="">
      </van-swipe-item>
    </van-swipe>
     <span>￥{{basicInfo.minPrice}}</span>
    <h5 class="item-name">
      {{ basicInfo.name }}
    </h5>
    <div class="content" v-html="content"></div>
    </div>
    <!-- 商品行动栏 -->
    <van-goods-action>
      <van-goods-action-icon icon="home-o" text="首页" @click="$router.push('/home')"/>
      <van-goods-action-icon @click="$router.push('/cart')"   :badge="$store.state.cart.number" icon="cart-o" text="购物车" />
      <van-goods-action-button @click="showSku(0)" color="#ff734c" type="warning" text="加入购物车" />
      <van-goods-action-button  @click="showSku(1)" color="#ff4c73" type="danger" text="立即购买" />
    </van-goods-action>
    <!-- /商品行动栏 -->
    <!-- 商品弹出规格 -->
    <van-popup
        v-model="skuShow"
        position="bottom"
        closeable
        round
        :style="{ height: '40%' }"
    >
      <div>
        <van-card
          :num="sku.num"
          :price="sku.minPrice"
          :title="sku.name"
          :thumb="sku.pic"
        >
          <template #footer>
            <van-stepper v-model="sku.num"/>
          </template>
        </van-card>
        <van-button size="large" @click="confirmAction" round type="danger">确定</van-button>
      </div>
    </van-popup>
    <!-- 商品弹出规格 -->
  </div>
</template>

<script>
import CommonHead from '../../components/CommonHead.vue'
import { fetchItemDetail, addCart } from '_api'
import { getToken } from '_utils'
import { Toast } from 'vant'
export default {
  name: 'Detail',
  components: { CommonHead },
  data () {
    return {
      basicInfo: {},
      content: '',
      pics: [],
      sku: {}, // 商品规格数据
      itemName: '详情页',
      skuShow: false,
      actionCode: 0 // 加入购物车 1 立即购买
    }
  },
  created () {
    this.fetchDetail()
  },
  methods: {
    confirmAction () {
      // 点击商品规格弹窗的 确定按钮  0是加入购物车
      if (this.actionCode === 0) {
        addCart({
          goodsId: this.sku.id,
          number: this.sku.number,
          token: getToken()
        }).then((res) => {
          this.skuShow = false
          if (res.data.code === 0) {
            Toast.success('加入购物车成功')
            this.$store.commit('cart/set_cart_info', {
              items: res.data.data.items,
              number: res.data.data.number
            })
          }
        })
      } else {
        alert('立即购买')
      }
    },
    showSku (code) {
      // 显示商品规格弹窗
      this.skuShow = true
      this.actionCode = code
    },
    fetchDetail () {
      // 请求商品详情
      fetchItemDetail(this.$route.params.id).then(res => {
        console.log(res)
        if (res.data.code === 0) {
          this.basicInfo = res.data.data.basicInfo
          this.content = res.data.data.content.replace(/<img/gi, '<img style="width:100%;display:block"')
          this.pics = res.data.data.pics
          this.itemName = this.basicInfo.name
          this.itemPrice = this.basicInfo.minPrice
          // 商品购买的规格
          this.sku = {
            ...this.basicInfo,
            number: 1
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container{
  padding-top: 46px;
  padding-bottom: 60px;

  .my-swipe{
    width: 100%;

    img{
      width: 100%;

    }
  }
 /*  .content {
    /deep/ img{
      width:100%;
      display: block;
    }
  } */
}
.van-notice-bar{
  padding-left: 115px;
}

.van-popup{
  background-color: #fafafa;
}
</style>
